.dashboard {
  .empty-text {
    @apply mt-5 text-body-300 text-color-foreground-disabled;
  }

  .vertical-line {
    @apply text-color-foreground-faint opacity-50;
  }

  .vertical-line-divider {
    @apply mx-0.5 h-3.5 w-[1.25px] bg-color-foreground-faint opacity-25;
  }

  .tags {
    @apply flex shrink-0 gap-1;
  }

  .main,
  .secondary {
    h2,
    h3,
    h5 {
      @apply text-color-foreground-strong;
    }

    h3,
    h5 {
      @apply font-semibold;
    }

    h2 {
      @apply text-display-400;
    }

    h3 {
      @apply text-display-300;
    }

    h4 {
      @apply lg:text-display-300 lg:font-semibold lg:text-color-foreground-strong;
    }

    h5 {
      @apply text-body-200;
    }

    li > a {
      @apply block;

      &:hover {
        @apply bg-color-page-faint;
      }
    }
  }

  .main-inner {
    @apply pr-8 pl-3;
  }

  .secondary {
    .scroll-affordance {
      @apply pointer-events-none absolute top-0 bottom-4 w-10 from-black/5 to-black/0;
      @apply transition-opacity;
    }
  }

  .footer {
    @apply mt-0;
  }
}

.hds-alert--color-highlight {
  @apply pl-5;

  .hds-alert__icon {
    @apply hidden;
  }
}

.icon-list {
  li {
    @apply grid items-center gap-2.5 py-0.5 pl-1;
    grid-template-columns: 16px 1fr;
  }
}
